<template>
    <div class="title">新增医嘱单</div>
    <div class="left">
        <div class="left1">
            <div class="info" style="margin-top:10px">
                <div class="div">
                    <span class="span1">*</span>
                    <span class="span2">宠物基本信息</span>
                </div>
                <div class="div1" style="margin-top:10px">
                    <span class="span3">宠物姓名:</span><input type="text" placeholder="火火" style="width:80px">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">品类:</span><input type="text" placeholder="火火" style="width:50px">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">品种:</span><input type="text" placeholder="火火" style="width:80px">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">年龄:</span><input type="text" placeholder="火火" style="width:80px">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">以往病史:</span><input type="text" placeholder="火火" style="width:80px">
                </div>
            </div>
            <div class="user" style="margin-top:10px">
                <div class="div" style="margin-top:10px">
                    <span class="span1">*</span>
                    <span class="span2">主人基本信息</span>
                </div>
                <div class="user1" style="margin-top:10px">
                    <span class="span3">主人姓名:</span><input type="text" placeholder="1q3" style="width:50px">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">主人电话:</span><input type="text" placeholder="12345678912">
                    <span>&nbsp&nbsp</span>
                    <span class="span3">主人地址:</span><input type="text" style="width:200px"> <br>
                  



                    <div class="demo-date-picker">
                        <span class="span3" style="margin-top:10px">就诊日期:</span>
                        <el-date-picker v-model="value" type="date" placeholder="Pick a day" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD"  style="height:20px">
                            <template #default="cell">
                                <div class="cell" :class="{ current: cell.isCurrent }">
                                    <span class="text">{{ cell.text }}</span>
                                    <span v-if="isHoliday(cell)" class="holiday" />
                                </div>
                            </template>
                        </el-date-picker>
                    </div>



                </div>
            </div>
            <div class="record" style="margin-top:10px">
                <div class="div">
                    <span class="span1">*</span>
                    <span class="span2">诊断信息</span>
                </div>
                <div class="dsc1">
                    <span class="span3">主要病症:</span><input type="text" style="width:650px">
                </div>
                <div class="dsc2">
                    <span class="span3">诊断结果:</span>
                    <input type="text" style="width:650px">
                </div>
                <div class="dsc3">
                    <span class="span3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp用药:</span>
                    <input type="text" style="width:650px">
                </div>
                <div class="dsc4">
                    <span class="span3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp医嘱:</span>
                    <input type="text" style="width:650px">
                </div>
                <div class="dsc5">
                    <span class="span3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp备注:</span>
                    <input type="text" style="width:650px">
                </div>
            </div>
            <div class="total" style="margin-top:10px">
                <div class="div">
                    <span class="span1">*</span>
                    <span class="span2">共计费用:</span>
                    <span class="total1"></span>
                    <span>元</span>
                </div>
            </div>
            <div class="pay" style="margin-top:10px">
                <div class="div">
                    <span class="span1">*</span>
                    <span class="span2">缴费方式：</span>
                    <img src="../../../assets/images/01 .png">&nbsp<img src="../../../assets/images/02.png">&nbsp<img
                        src="../../../assets/images/03.png">
                </div>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <div class="top1">药品库库存查询</div>
                <div class="top2"><el-button style="width:200px">输入药品</el-button></div>
                <div class="top3"></div>
            </div>
            <div class="bottom">
                <div class="btm">
                    <div>就诊医生信息</div>
                    <div class="bottom1"></div>
                </div>
                <div class="dc">
                    <span>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名:</span><span>成超</span> <br>
                    <span>科&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp室:</span><span>宠物内科</span> <br>
                    <span>职&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp位:</span><span>主治医生</span><br>
                    <span>主攻方向:</span><span>宠物医难杂症</span> <br>
                    <span>成&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp就:</span><span>宠物医生教授勋章</span>
                </div>

            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('2022-12-15')
const holidays = [
 new Date()
]

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
</script>
<style lang="less" scoped>
.title {
    height: 30px;
    margin: 20px 0 0 20px;
    font-weight: 600;

    &::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
        margin-right: 10px;
    }
}

.left {
    width: 1000px;
    height: 600px;
    margin-left: 20px;
    background-color: #F9F7F1;

    .left1 {
        width: 750px;
        height: 570px;
        float: left;
        background-color: #fff;
        .total {
            margin-top: 10px;

            .total1 {
                width: 10px;
            }
        }
        .pay {
            margin-top: 20px;

            img {
                width: 20px;
                height: 20px;
            }
        }
    }

    .right {
        width: 230px;
        height: 600px;
        float: right;
        display: flex;
        flex-direction: column;

        .top {
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid black;
            background-color: #fff;

            .top1 {
                width: 100%;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }

            .top2 {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);

                .el-button {
                    background-color: #F9F7F1;
                }
            }

            .top3 {
                width: 200px;
                height: 200px;
                position: absolute;
                left: 50%;
                bottom: 20px;
                transform: translateX(-50%);
                background-color: #F9F7F1;
            }
        }

        .bottom {
            margin-top: 10px;
            width: 100%;
            height: 250px;
            background-color: #fff;
            border: 1px solid #000;

            .btm {
                width: 100%;
                height: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;

                .bottom1 {
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                    background-color: cyan;
                }
            }

            .dc {
                margin-top: 20px;
                margin-left: 10px;
                font-size: 12px;
                font-weight: 300;
            }
        }
    }
}

.dsc1,
.dsc2,
.dsc3,
.dsc4,
.dsc5 {
    margin-top: 10px;
    margin-left: 20px;
}
.div {
    margin-left: 10px;

    .span1 {
        font-size: 18px;
        color: red;
    }

    .span2 {
        font-size: 14px;
        font-weight: 600;
    }
}
.div1 {
    margin-left: 20px;
}
.span3 {
    font-size: 10px;
}
.user1 {
    margin-left: 20px;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

</style>